<template>
  <div class="common">
     <div class="menu">
       <Menu :theme="theme2" :active-name="active"  width="auto" :open-names="['1']">
         <Submenu name="1">
           <template slot="title">
             <Icon type="ios-paper" />
             内容管理
           </template>
           <MenuItem name="1-1">文章管理</MenuItem>
           <MenuItem name="1-2">评论管理</MenuItem>
           <MenuItem name="1-3">举报管理</MenuItem>
         </Submenu>
         <Submenu name="2">
           <template slot="title">
             <Icon type="ios-people" />
             用户管理
           </template>
           <MenuItem name="2-1">新增用户</MenuItem>
           <MenuItem name="2-2">活跃用户</MenuItem>
         </Submenu>
         <Submenu name="3">
           <template slot="title">
             <Icon type="ios-stats" />
             统计分析
           </template>
           <MenuGroup title="使用">
             <MenuItem name="3-1">新增和启动</MenuItem>
             <MenuItem name="3-2">活跃分析</MenuItem>
             <MenuItem name="3-3">时段分析</MenuItem>
           </MenuGroup>
           <MenuGroup title="留存">
             <MenuItem name="3-4">用户留存</MenuItem>
             <MenuItem name="3-5">流失用户</MenuItem>
           </MenuGroup>
         </Submenu>
       </Menu>
     </div>
     <div class="common-content">
       <router-view></router-view>
     </div>
  </div>
</template>

<script>
export default {
  name: "hot-help",
  data () {
    return {
      active: '1-1',
      theme2: 'light',
    }
  }
}
</script>

<style scoped lang="less">
.common {
  min-height: 100vh;
  padding-top: 32px;
  display: flex;
  flex-shrink: 0;
  .menu {
    width: 20%;
    flex: 0 0 20%;
  }
  .common-content {
    margin-left: 24px;
    flex: 1;
  }
}
</style>